<!--<template>-->
<!--  <div>-->
<!--    <el-row :gutter="20">-->
<!--      <el-col :span="6" v-for="item in cards" :key="item.title">-->
<!--        <el-card class="box-card">-->
<!--          <div slot="header" class="clearfix">{{ item.title }}</div>-->
<!--          <div class="text item">-->
<!--            <svg class="icon" aria-hidden="true">-->
<!--              <use :xlink:href="item.icon" style="width: 100px"></use>-->
<!--            </svg>-->
<!--            <span class="text">{{ item.data }}</span>-->
<!--          </div>-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--    </el-row>-->
<!--    <div id="myTimer"></div>-->
<!--    &lt;!&ndash; 为 ECharts 准备一个具备大小（宽高）的 DOM &ndash;&gt;-->
<!--    <div id="main"></div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import { count } from '@/api/dashboard'-->
<!--import * as echarts from 'echarts'-->

<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      cards: [-->
<!--        { title: '已借阅', data: 100, icon: '#iconlend-record-pro' },-->
<!--        { title: '总访问', data: 100, icon: '#iconvisit' },-->
<!--        { title: '图书数', data: 100, icon: '#iconbook-pro' },-->
<!--        { title: '读者数', data: 1000, icon: '#iconpopulation' }-->
<!--      ]-->
<!--    }-->
<!--  },-->
<!--  mounted() {-->
<!--    this.circleTimer()-->

<!--    count().then(({ data }) => {-->
<!--      // console.log(data)-->
<!--      this.cards[0].data = data.lendRecordCount-->
<!--      this.cards[1].data = data.visitCount-->
<!--      this.cards[2].data = data.bookCount-->
<!--      this.cards[3].data = data.readerCount-->

<!--      // 基于准备好的dom，初始化echarts实例-->
<!--      var myChart = echarts.init(document.getElementById('main'))-->
<!--      // 绘制图表-->
<!--      myChart.setOption({-->
<!--        title: {-->
<!--          text: '统计'-->
<!--        },-->
<!--        tooltip: {-->
<!--          trigger: 'axis'-->
<!--          // axisPointer: {-->
<!--          //   type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'-->
<!--          // }-->
<!--        },-->
<!--        grid: {-->
<!--          left: '3%',-->
<!--          right: '4%',-->
<!--          bottom: '3%',-->
<!--          containLabel: true-->
<!--        },-->
<!--        xAxis: {-->
<!--          type: 'category',-->
<!--          data: this.cards.map(item => item.title),-->
<!--          axisTick: {-->
<!--            alignWithLabel: true-->
<!--          }-->
<!--        },-->
<!--        yAxis: {-->
<!--          type: 'value'-->
<!--        },-->
<!--        series: [-->
<!--          {-->
<!--            type: 'bar',-->
<!--            label: { show: true },-->
<!--            barWidth: '25%',-->
<!--            data: [-->
<!--              {-->
<!--                value: this.cards[0].data,-->
<!--                itemStyle: { color: '#5470c6' }-->
<!--              },-->
<!--              {-->
<!--                value: this.cards[1].data,-->
<!--                itemStyle: { color: '#91cc75' }-->
<!--              },-->
<!--              {-->
<!--                value: this.cards[2].data,-->
<!--                itemStyle: { color: '#fac858' }-->
<!--              },-->
<!--              {-->
<!--                value: this.cards[3].data,-->
<!--                itemStyle: { color: '#ee6666' }-->
<!--              }-->
<!--            ]-->
<!--          }-->
<!--        ]-->
<!--      })-->
<!--      window.addEventListener('resize', () => {-->
<!--        myChart.resize()-->
<!--      })-->
<!--    })-->
<!--  },-->
<!--  methods: {-->
<!--    circleTimer() {-->
<!--      this.getTimer()-->
<!--      setInterval(() => {-->
<!--        this.getTimer()-->
<!--      }, 1000)-->
<!--    },-->
<!--    getTimer() {-->
<!--      var d = new Date()-->
<!--      var t = d.toLocaleString()-->
<!--      document.getElementById('myTimer').innerHTML = t-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->
<!--.box-card {-->
<!--  /* width: 30%; */-->
<!--  margin-bottom: 25px;-->
<!--}-->

<!--.clearfix {-->
<!--  text-align: center;-->
<!--  font-size: 15px;-->
<!--}-->

<!--.text {-->
<!--  text-align: center;-->
<!--  font-size: 24px;-->
<!--  font-weight: 700;-->
<!--  vertical-align: super;-->
<!--}-->

<!--#main {-->
<!--  width: 100%;-->
<!--  height: 450px;-->
<!--  margin-top: 20px;-->
<!--}-->

<!--.icon {-->
<!--  width: 50px;-->
<!--  height: 50px;-->
<!--  padding-top: 5px;-->
<!--  padding-right: 10px;-->
<!--}-->
<!--</style>-->
<template>



<el-row>
<el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
  <el-card :body-style="{ padding: '0px' }">
    <img src="../../assets/img/pic1.jpg" class="image">
    <div style="padding: 14px;">
      <span>读万卷书，行万里路</span>
      <div class="bottom clearfix">
        <time class="time">{{ currentDate }}</time>
        <el-button type="text" class="button">^_^</el-button>
      </div>
    </div>
  </el-card>

  <el-slider></el-slider>

  <el-card :body-style="{ padding: '0px' }">
    <img src="../../assets/img/pic2.jpg" class="image">
    <div style="padding: 14px;">
      <span>读书破万卷。</span>
      <div class="bottom clearfix">
        <time class="time">{{ currentDate }}</time>
        <el-button type="text" class="button">(＾Ｕ＾)</el-button>
      </div>
    </div>
  </el-card>
</el-col>

  </el-row>
</template>
<style>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

/*.tableTitle {*/
/*  position: relative;*/
/*  margin: 0 auto;*/
/*  width: 600px;*/
/*  height: 1px;*/
/*  background-color: #d4d4d4;*/
/*  text-align: center;*/
/*  font-size: 16px;*/
/*  color: rgba(101, 101, 101, 1);*/
/*}*/
/*.midText {*/
/*  position: absolute;*/
/*  left: 50%;*/
/*  background-color: #ffffff;*/
/*  padding: 0 15px;*/
/*  transform: translateX(-50%) translateY(-50%);*/
/*}*/



</style>

<script>
export default {
  data() {
    return {
      currentDate: new Date()
    };
  }
}
</script>
